<template>
  <div class="app-container">
    <div class="info-title">
      <span>隐患治理任务处理</span>

      <!-- <el-button type="primary" class="info-back">返回列表</el-button> -->
      <el-affix :offset="100">
        <el-button
          v-if="infoRectify.dangerState == '0'"
          target=".app-container"
          type="primary"
          @click="openRectify"
          >去整改</el-button
        >
        <el-button
          v-else-if="infoRectify.dangerState == '1'"
          type="primary"
          target=".app-container"
          @click="openAccept"
          >去验收</el-button
        >

        <el-button
          v-else-if="infoRectify.dangerState == '5'"
          target=".app-container"
          type="primary"
          @click="openAllocation"
          >去分配</el-button
        >
      </el-affix>
    </div>
    <el-row :gutter="12">
      <!--基本信息-->
      <el-col :span="8">
        <div class="info-header">
          <span>隐患名称:{{ infoRectify.dangerName }}</span>
          <img
            v-if="infoRectify.dangerState == '1'"
            src="@/assets/prevent/wait-accept.png"
          />
          <img
            v-if="infoRectify.dangerState == '5'"
            src="@/assets/prevent/wait-allocation.png"
          />
          <img
            v-if="
              infoRectify.dangerState == '0' ||
              infoRectify.dangerState == '2' ||
              infoRectify.dangerState == '3'
            "
            src="@/assets/prevent/wait-rectify.png"
          />
          <img
            v-if="infoRectify.dangerState == '9'"
            src="@/assets/prevent/wait-complete.png"
          />
        </div>
        <!--相关附件-->
        <el-card class="box-card" style="margin-top: 12px">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">相关文件资源</span>
            </div>
          </template>
          <div class="body">
            <div class="info-item" style="height: 120px">
              <span>现场信息:</span
              ><span>
                <ul
                  v-if="infoRectify.dangerImg"
                  class="el-upload-list el-upload-list--picture-card"
                >
                  <li
                    class="el-upload-list__item is-ready"
                    v-for="(item, index) in srcList"
                  >
                    <img
                      class="el-upload-list__item-thumbnail"
                      @click="handlePictureCardPreview(item)"
                      :src="item"
                    />
                  </li>
                </ul>
              </span>
            </div>
            <div class="info-item">
              <span>隐患整改通知单:</span>
              <span v-if="infoRectify.noticeRectification" class="info-pdf">
                <img src="@/assets/common/icon_pdf.png" />
                <span>
                  {{
                    infoRectify.noticeRectification
                      ? parseFileName(infoRectify.noticeRectification)
                      : "---"
                  }}
                </span>
                <el-button type="primary" @click="handlePdfPreview">预览</el-button>
              </span>
              <span v-else>---</span>
            </div>
            <div class="info-item" style="height: 120px">
              <span>验收材料:</span>
              <ul
                v-if="infoRectify.checkAcceptDesc"
                class="el-upload-list el-upload-list--picture-card"
              >
                <li
                  class="el-upload-list__item is-ready"
                  v-for="(item, index) in infoRectify.checkAcceptDesc.split(',')"
                >
                  <img
                    class="el-upload-list__item-thumbnail"
                    @click="handlePictureCardPreview(item)"
                    :src="item"
                  />
                </li>
              </ul>
              <!-- <ul v-else class="el-upload-list el-upload-list--picture-card">
                <li class="el-upload-list__item is-ready">
                  <img
                    class="el-upload-list__item-thumbnail"
                    src="@/assets/common/common-null.png"
                  />
                </li>
              </ul> -->
            </div>
          </div>
        </el-card>
        <!--系统信息--->
        <el-card class="box-card" style="margin-top: 12px">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">其他信息</span>
            </div>
          </template>
          <div class="body">
            <div class="info-item">
              <span>创建人:</span><span>{{ infoRectify.createdBy }}</span>
            </div>
            <div class="info-item">
              <span>创建时间:</span><span>{{ parseTime(infoRectify.createdAt) }}</span>
            </div>
            <div class="info-item">
              <span>更新人:</span
              ><span>{{ infoRectify.updatedBy ? infoRectify.updatedBy : "---" }}</span>
            </div>
            <div class="info-item">
              <span>更新时间:</span
              ><span>{{
                infoRectify.updatedAt ? parseTime(infoRectify.updatedAt) : "---"
              }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="16">
        <!--隐患的基本信息-->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">隐患信息</span>
            </div>
          </template>
          <div class="body">
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>隐患名称:</span><span>{{ infoRectify.dangerName }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>风险分析单元:</span><span>{{ riskUnitName }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>隐患来源:</span
                  ><span>{{
                    infoRectify.dangerSrc
                      ? parseShowDangerSrc(infoRectify.dangerSrc)
                      : "---"
                  }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>隐患类型:</span
                  ><span>{{
                    infoRectify.hazardDangerType
                      ? parseShowDangerTypeName(infoRectify.hazardDangerType)
                      : "---"
                  }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>隐患等级:</span>
                  <span>{{
                    infoRectify.dangerType
                      ? parseShowDangerType(infoRectify.dangerType)
                      : "---"
                  }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>隐患状态:</span>
                  <span>{{
                    infoRectify.dangerState
                      ? parseShowDangerState(infoRectify.dangerState)
                      : "---"
                  }}</span>
                </div>
              </el-col>
            </el-row>
            <div class="info-item">
              <span>隐患描述:</span><span>{{ infoRectify.dangerDesc }}</span>
            </div>
            <div class="info-item">
              <span>原因分析:</span
              ><span>{{
                infoRectify.dangerReason ? infoRectify.dangerReason : "---"
              }}</span>
            </div>
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>隐患登记人:</span><span>{{ infoRectify.registrant }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>隐患登记时间:</span>
                  <span>{{ parseTime(infoRectify.registTime) }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <!--隐患治理信息-->
        <el-card class="box-card" style="margin-top: 12px">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">隐患治理信息</span>
            </div>
          </template>
          <div class="body">
            <div class="info-item">
              <span>整改措施:</span
              ><span>{{
                infoRectify.controlMeasures ? infoRectify.controlMeasures : "---"
              }}</span>
            </div>
            <div class="info-item">
              <span>资金来源:</span>
              <span>
                {{ infoRectify.controlMeasures ? infoRectify.controlMeasures : "---" }}
              </span>
            </div>
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>责任部门:</span><span>{{ infoRectify.liableDeptName }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>责任人:</span><span>{{ infoRectify.liablePerson }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>整改期限:</span>
                  <span>{{ parseTime(infoRectify.dangerManageDeadline) }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>实际整改时间:</span>
                  <span>{{ parseTime(infoRectify.dangerManageDeadline) }}</span>
                </div>
              </el-col>
            </el-row>

            <div class="info-item">
              <span>整改备注:</span
              ><span>{{ parseTime(infoRectify.dangerManageDeadline) }}</span>
            </div>
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>验收部门:</span
                  ><span>{{
                    infoRectify.checkAcceptDeptName
                      ? infoRectify.checkAcceptDeptName
                      : "---"
                  }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>验收人:</span
                  ><span>{{
                    infoRectify.checkAcceptPerson ? infoRectify.checkAcceptPerson : "---"
                  }}</span>
                </div>
              </el-col>
            </el-row>
            <div class="info-item">
              <span>验收标准:</span
              ><span>{{
                infoRectify.acceptanceStandard ? infoRectify.acceptanceStandard : "---"
              }}</span>
            </div>
            <div class="info-item">
              <span>验收时间:</span
              ><span>{{
                infoRectify.checkAcceptTime
                  ? parseTime(infoRectify.checkAcceptTime)
                  : "---"
              }}</span>
            </div>
            <div class="info-item">
              <span>验收备注:</span
              ><span>{{
                infoRectify.checkAcceptComment ? infoRectify.checkAcceptComment : "---"
              }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--去分配-->
    <el-dialog :title="title" v-model="allocationOpen" width="80%" append-to-body>
      <el-form
        :model="allocationForm"
        :rules="allocationRules"
        ref="allocationRef"
        label-width="80%"
      >
        <el-form-item label="分析对象/单元:" label-width="140" prop="riskAnalysisUnit">
          <el-tree-select
            v-model="allocationForm.riskAnalysisUnit"
            :data="unitOptions"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            placeholder="请选择风险分析单元"
            filterable
          >
            <template
              class="custom-tree-node"
              #default="{ node, data }"
              :disabled="data.nodeLevel == '1'"
            >
              <span>{{ node.label }}</span>
            </template>
          </el-tree-select>
        </el-form-item>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="隐患来源:" label-width="140" prop="dangerSrc">
              <el-select
                v-model="allocationForm.dangerSrc"
                placeholder="请选择"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="dict in hiddenCheckListTypeOptions"
                  :key="dict.hiddenListTypeId"
                  :label="dict.hiddenListTypeName"
                  :value="dict.hiddenListTypeId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="隐患类别:" label-width="140" prop="hazardCategory">
              <el-select
                v-model="allocationForm.hazardCategory"
                placeholder="请选择隐患类别"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="dict in hazardCategoryOptions"
                  :key="dict.id"
                  :label="dict.label"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="隐患名称:" label-width="140px" prop="dangerName">
          <el-input
            v-model="allocationForm.dangerName"
            placeholder="请输入隐患名称"
            maxlength="300"
          />
        </el-form-item>
        <el-form-item label="隐患描述:" label-width="140px" prop="dangerDesc">
          <el-input
            type="textarea"
            :rows="3"
            v-model="allocationForm.dangerDesc"
            placeholder="请输入隐患描述"
            maxlength="3000"
          />
        </el-form-item>
        <el-form-item label="现场图片:" label-width="140px" prop="dangerImg">
          <ul
            v-if="dangerImgList.length > 0"
            class="el-upload-list el-upload-list--picture-card"
          >
            <li
              class="el-upload-list__item is-ready"
              v-for="(item, index) in dangerImgList"
            >
              <img class="el-upload-list__item-thumbnail" :src="item" />
            </li>
          </ul>
          <ul v-else class="el-upload-list el-upload-list--picture-card">
            <li class="el-upload-list__item is-ready">
              <img
                class="el-upload-list__item-thumbnail"
                src="@/assets/common/common-null.png"
              />
            </li>
          </ul>
        </el-form-item>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="登记人员:" label-width="140px" prop="registrantId">
              <el-select
                v-model="allocationForm.registrantId"
                clearable
                filterable
                placeholder="请选择登记人员"
              >
                <el-option
                  v-for="dict in userOption"
                  :key="dict.id"
                  :label="dict.label"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登记日期:" label-width="140px" prop="registTime">
              <el-date-picker
                v-model="allocationForm.registTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="datetime"
                placeholder="请选择登记日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="原因分析:" label-width="140px" prop="dangerReason">
          <el-input
            type="textarea"
            :rows="3"
            v-model="allocationForm.dangerReason"
            placeholder="请输入原因分析"
            maxlength="3000"
          />
        </el-form-item>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="隐患等级:" label-width="140px" prop="dangerType">
              <el-radio-group v-model="allocationForm.dangerType">
                <el-radio label="1" size="large" border>一般隐患</el-radio>
                <el-radio label="2" size="large" border>重大隐患</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-top: 10px">
            <el-form-item label="隐患类型:" label-width="140" prop="hazardDangerType">
              <el-select
                v-model="allocationForm.hazardDangerType"
                placeholder="请选择隐患类型"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="dict in dangerTypeOptions"
                  :key="dict.hazardDangerTypeId"
                  :label="dict.hazardDangerTypeName"
                  :value="dict.hazardDangerTypeId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="整改措施:" label-width="140px">
          <el-input
            type="textarea"
            :rows="3"
            v-model="allocationForm.controlMeasures"
            placeholder="请输入整改措施"
            maxlength="300"
          />
        </el-form-item>
        <el-form-item label="资金来源:" label-width="140px">
          <el-input
            type="textarea"
            :rows="3"
            v-model="allocationForm.cost"
            placeholder="请输入资金来源"
            maxlength="300"
          />
        </el-form-item>
        <el-form-item label="验收标准:" label-width="140px">
          <el-input
            type="textarea"
            :rows="3"
            v-model="allocationForm.acceptanceStandard"
            placeholder="请输入验收标准"
            maxlength="300"
          />
        </el-form-item>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="整改人员:" label-width="140px" prop="liablePersonId">
              <el-select
                v-model="allocationForm.liablePersonId"
                clearable
                filterable
                placeholder="请选择整改人员"
              >
                <el-option
                  v-for="dict in userOption"
                  :key="dict.id"
                  :label="dict.label"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="验收人员:"
              label-width="140px"
              prop="checkAcceptPersonId"
            >
              <el-select
                v-model="allocationForm.checkAcceptPersonId"
                clearable
                filterable
                placeholder="请选择验收人员"
              >
                <el-option
                  v-for="dict in userOption"
                  :key="dict.id"
                  :label="dict.label"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="整改期限:" label-width="140px" prop="dangerManageDeadline">
          <el-date-picker
            v-model="allocationForm.dangerManageDeadline"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetime"
            placeholder="请选择登记日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="上传整改通知单:"
          label-width="140px"
          prop="noticeRectification"
        >
          <ul class="el-upload-list el-upload-list--picture-card">
            <li
              class="el-upload-list__item is-ready"
              v-if="allocationForm.noticeRectification"
            >
              <img
                class="el-upload-list__item-thumbnail"
                src="@/assets/common/common-pdf.png"
              />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePdfPreview()">
                  <el-icon><zoom-in /></el-icon>
                </span>
              </span>
            </li>
          </ul>
          <el-upload
            :http-request="handleNoticeUpload"
            v-model="allocationForm.noticeRectification"
            :show-file-list="false"
            :before-upload="beforeNoticeUpload"
            :on-exceed="handleNoticeAlarm"
            list-type="picture-card"
          >
            <el-icon><Plus /></el-icon>
            <template #tip>
              <div class="el-upload__tip">仅支持上传pdf文件</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitAllocationForm">确 定</el-button>
          <el-button @click="cancelAllocation">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--去整改-->
    <el-dialog :title="title" v-model="rectificationOpen" width="80%" append-to-body>
      <el-form :model="rectifyForm" :rules="rectifyRules" ref="rectifyFormRef">
        <el-form-item label="备注:" label-width="140px" prop="liableComment">
          <el-input
            type="textarea"
            :rows="3"
            v-model="rectifyForm.liableComment"
            placeholder="请输入整改备注"
            maxlength="3000"
          />
        </el-form-item>
        <el-form-item label="整改材料:" label-width="140px" prop="liableDesc">
          <ul class="el-upload-list el-upload-list--picture-card">
            <li
              class="el-upload-list__item is-ready"
              v-for="(item, index) in rectifyImgList"
            >
              <img class="el-upload-list__item-thumbnail" :src="item" />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-delete"
                  @click="handleAcceptRemove(item, index)"
                >
                  <el-icon><Delete /></el-icon>
                </span>
              </span>
            </li>
          </ul>
          <el-upload
            :http-request="handleRectifyUpload"
            v-model="rectifyForm.liableDesc"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-exceed="handleAlarm"
            list-type="picture-card"
            :limit="3"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="整改完成时间:" label-width="140px" prop="liableTime">
          <el-date-picker
            v-model="rectifyForm.liableTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetime"
            placeholder="请选择整改完成时间"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitRectifyForm">确 定</el-button>
          <el-button @click="cancelRectify">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--去验收-->
    <el-dialog :title="title" v-model="acceptOpen" width="80%" append-to-body>
      <el-form
        :model="acceptForm"
        :rules="acceptRules"
        ref="acceptFormRef"
        label-width="80px"
      >
        <el-form-item label="备注:" label-width="140px" prop="checkAcceptComment">
          <el-input
            type="textarea"
            :rows="3"
            v-model="acceptForm.checkAcceptComment"
            placeholder="请输入验收备注"
            maxlength="3000"
          />
        </el-form-item>
        <el-form-item label="验收材料:" label-width="140px" prop="checkAcceptDesc">
          <ul class="el-upload-list el-upload-list--picture-card">
            <li
              class="el-upload-list__item is-ready"
              v-for="(item, index) in acceptImgList"
            >
              <img class="el-upload-list__item-thumbnail" :src="item" />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-delete"
                  @click="handleAcceptRemove(item, index)"
                >
                  <el-icon><Delete /></el-icon>
                </span>
              </span>
            </li>
          </ul>
          <el-upload
            :http-request="handleAcceptUpload"
            v-model="acceptForm.checkAcceptDesc"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-exceed="handleAlarm"
            list-type="picture-card"
            :limit="3"
          >
            <el-icon><Plus /></el-icon>

            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitAcceptForm">确 定</el-button>
          <el-button @click="cancelAccept">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--预览PDF文件对话框-->
    <el-dialog :title="title" v-model="openPDF" width="60%" append-to-body>
      <PDFView :pdfUrl="allocationForm.noticeRectification" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelPdfPreview">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="MyRectifyHandle">
import PDFView from "@/components/PDFPreview";
import {
  getRectifyTaskInfo,
  submitAcceptTask,
  submitRectifyTask,
  submitAllocationTask,
} from "@/api/prevent/workbench/myRectify";
import { getUnitInfo, getUnitTree } from "@/api/prevent/risk/unit";
import { listDangerType } from "@/api/prevent/hidden/dangerType";
import { listHiddenLevel } from "@/api/prevent/hidden/hiddenLevel";
import { listCheckListType } from "@/api/prevent/hidden/checkListType";
import { listDangerState } from "@/api/prevent/hidden/dangerState";
import { listDutyUser } from "@/api/prevent/hidden/dutyUser";
import { uploadFile } from "@/api/common/upload";
const infoRectify = ref([]);
const loading = ref(false);
const riskUnitName = ref("---");
const unitOptions = ref([]); //风险分析单元选择项
const userOption = ref(); //登记人员
const dangerTypeOptions = ref([]); //隐患类型选择选
const hiddenLevelOptions = ref([]); //隐患等级选择项
const hiddenCheckListTypeOptions = ref([]); //隐患排查清单类型选择项
const dangerStateOptions = ref([]); //隐患状态选择项
const hazardCategoryOptions = ref([
  { id: "0", label: "其他隐患" },
  { id: "1", label: "主要负责人隐患" },
  { id: "2", label: "技术负责人隐患" },
  { id: "3", label: "操作负责人隐患" },
]);

const allocationOpen = ref(false); //去分配对话框
const rectificationOpen = ref(false); //去整改对话框
const acceptOpen = ref(false); //去验收对话框
const openPDF = ref(false);
const title = ref("");
const route = useRoute();
const dangerImgList = ref([]); //现场材料数组
const acceptImgList = ref([]); //验收材料列表
const rectifyImgList = ref([]); //整改材料列表
const { proxy } = getCurrentInstance();
const data = reactive({
  allocationForm: {},
  rectifyForm: {},
  acceptForm: {},
  allocationRules: {
    riskAnalysisUnit: [
      {
        required: true,
        message: "风险分析对象/单元必须选择",
        trigger: ["blur", "change"],
      },
    ],
    dangerSrc: [
      { required: true, message: "请选择隐患来源", trigger: ["blur", "change"] },
    ],
    dangerName: [
      { required: true, message: "请输入隐患名称", trigger: "blur" },
      {
        min: 5,
        max: 100,
        message: "隐患名称长度必须介于 5 和 100 之间",
        trigger: "blur",
      },
    ],
    dangerDesc: [
      { required: true, message: "请输入隐患描述", trigger: "blur" },
      {
        min: 5,
        max: 3000,
        message: "隐患描述长度必须介于 5 和 3000 之间",
        trigger: "blur",
      },
    ],
    registrantId: [
      { required: true, message: "请选择登记人员", trigger: ["blur", "change"] },
    ],
    registTime: [
      { required: true, message: "请选择登记时间", trigger: ["blur", "change"] },
    ],
    dangerType: [
      { required: true, message: "请选择隐患等级", trigger: ["blur", "change"] },
    ],
    hazardDangerType: [
      { required: true, message: "请选择隐患类型", trigger: ["blur", "change"] },
    ],
    hazardCategory: [
      { required: true, message: "请选择隐患类别", trigger: ["click", "change"] },
    ],
    liablePersonId: [
      { required: true, message: "请选择整改人员", trigger: ["click", "change"] },
    ],
    checkAcceptPersonId: [
      { required: true, message: "请选择验收人员", trigger: ["click", "change"] },
    ],
    dangerManageDeadline: [
      { required: true, message: "请选择整改期限", trigger: ["click", "change"] },
    ],
  },
  rectifyRules: {
    liableComment: [{ required: true, message: "整改备注不能为空", trigger: "blur" }],
    liableDesc: [{ required: true, message: "整改材料必须提交", trigger: "blur" }],
    liableTime: [{ required: true, message: "整改完成时间必须选择", trigger: "blur" }],
  },
  acceptRules: {
    checkAcceptComment: [
      { required: true, message: "验收备注不能为空", trigger: "blur" },
    ],
    checkAcceptDesc: [{ required: true, message: "验收材料不能为空", trigger: "blur" }],
  },
});
const {
  allocationForm,
  rectifyForm,
  acceptForm,
  allocationRules,
  rectifyRules,
  acceptRules,
} = toRefs(data);
(() => {
  const processId = route.params && route.params.processId;
  if (processId) {
    loading.value = true;
    getRectifyTaskInfo(processId).then((response) => {
      infoRectify.value = response.data;
      loading.value = false;
      //console.log(response.data.riskAnalysisUnit);
      getUnit(response.data.riskAnalysisUnit);
      if (infoRectify.value.dangerImg != null && infoRectify.value.dangerImg != "") {
        srcList.value = infoRectify.value.dangerImg.split(",");
        url.value = srcList.value[0];
      }
    });
  }
})();

/** 去分配对话框 */
function openAllocation() {
  allocationOpen.value = true;
  allocationForm.value = infoRectify.value;
  allocationForm.value.registrantId = parseInt(infoRectify.value.registrantId);
  allocationForm.value.dangerSrc = parseInt(infoRectify.value.dangerSrc);
  allocationForm.value.hazardDangerType = parseInt(infoRectify.value.hazardDangerType);
  title.value = "去分配";
  getUserList();
  getRiskUnitList();
}
/** 去整改对话框 */
function openRectify() {
  rectificationOpen.value = true;
  title.value = "去整改";
}
/** 去验收对话框 */
function openAccept() {
  acceptOpen.value = true;
  title.value = "去验收";
}
/** 提交去分配任务信息 */
function submitAllocationForm() {
  allocationOpen.value = false;
  proxy.$refs["allocationRef"].validate((valid) => {
    if (valid) {
      console.log("分配提交的数据", allocationForm.value);
      submitAllocationTask(allocationForm.value).then((response) => {
        proxy.$modal.msgSuccess("分配完成");
        allocationOpen.value = false;
      });
    }
  });
}
/** 取消提交去分配任务信息 */
function cancelAllocation() {
  allocationOpen.value = false;
}
/** 提交去整改任务信息 */
function submitRectifyForm() {
  rectifyForm.value.liableDesc = rectifyImgList.value + "";
  rectifyForm.value.managementProcessId = infoRectify.value.processId;
  proxy.$refs["rectifyFormRef"].validate((valid) => {
    if (valid) {
      console.log("验收提交的数据", rectifyForm.value);
      submitRectifyTask(rectifyForm.value).then((response) => {
        proxy.$modal.msgSuccess("整改完成");
        rectificationOpen.value = false;
      });
    }
  });
}
/** 取消提交去整改任务信息 */
function cancelRectify() {
  rectificationOpen.value = false;
}
/** 提交去验收任务信息 */
function submitAcceptForm() {
  acceptForm.value.checkAcceptDesc = acceptImgList.value + "";
  acceptForm.value.managementProcessId = infoRectify.value.processId;
  acceptForm.value.checkAcceptStarts = "0";
  proxy.$refs["acceptFormRef"].validate((valid) => {
    if (valid) {
      console.log("验收提交的数据", acceptForm.value);
      submitAcceptTask(acceptForm.value).then((response) => {
        proxy.$modal.msgSuccess("验收成功");
        acceptOpen.value = false;
      });
    }
  });
}
/** 取消提交去验收任务信息 */
function cancelAccept() {
  acceptOpen.value = false;
}

/** 获取风险分析单元详细信息 */
function getUnit(riskUnitId) {
  getUnitInfo(riskUnitId).then((response) => {
    //return response.data.riskUnitName;
    riskUnitName.value = response.data.riskUnitName;
  });
}

/** 获取风险分析单元列表数据 */
async function getRiskUnitList() {
  getUnitTree().then((response) => {
    unitOptions.value = response.data;
  });
}

/** 处理隐患类型呈现数据 */
function parseShowDangerTypeName(id) {
  if (dangerTypeOptions.value.length < 1) return "----";
  var itemTarget = dangerTypeOptions.value.filter((item) => {
    return item.hazardDangerTypeId == id;
  });
  return itemTarget[0].hazardDangerTypeName;
}

/** 处理隐患等级数据呈现 */
function parseShowDangerType(id) {
  if (hiddenLevelOptions.value.length < 1) return "----";
  var itemTarget = hiddenLevelOptions.value.filter((item) => {
    return item.hiddenLevelId == id;
  });
  return itemTarget[0].hiddenLevelName;
}

/** 处理隐患来源数据呈现 */
function parseShowDangerSrc(id) {
  if (hiddenCheckListTypeOptions.value.length < 1) return "----";
  var itemTarget = hiddenCheckListTypeOptions.value.filter((item) => {
    return item.hiddenListTypeId == id;
  });
  return itemTarget[0].hiddenListTypeName;
}

/** 处理隐患状态数据呈现 */
function parseShowDangerState(id) {
  //console.log(dangerStateOptions.value);
  if (dangerStateOptions.value.length < 1) return "----";
  var itemTarget = dangerStateOptions.value.filter((item) => {
    return item.dangerStateId == parseInt(id);
  });
  return itemTarget[0].dangerStateName;
}

/** 获取隐患类型选择项列表 */
async function getDangerTypeList() {
  listDangerType().then((response) => {
    dangerTypeOptions.value = response.data;
  });
}

/** 获取人员数据列表 */
async function getUserList() {
  listDutyUser().then((response) => {
    userOption.value = response.data;
  });
}

/** 获取隐患等级选择项列表 */
async function getHiddenLevelList() {
  listHiddenLevel().then((response) => {
    hiddenLevelOptions.value = response.data;
  });
}

/** 获取隐患排查清单类型选择项列表 */
async function getHiddenCheckListTypeList() {
  listCheckListType().then((response) => {
    hiddenCheckListTypeOptions.value = response.data;
  });
}

/** 获取隐患状态选择项列表 */
async function getDangerStateList() {
  listDangerState().then((response) => {
    dangerStateOptions.value = response.data;
  });
}
/** 图片上传前*/
function beforeUpload(file) {
  const isJPG = file.type === "image/jpeg";
  const isPNG = file.type === "image/png";
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG && !isPNG) {
    proxy.$modal.msgError("上传图片只能是 JPG或者PNG 格式!");
  }

  if (!isLt2M) {
    proxy.$modal.msgError("上传图片大小不能超过 2MB!");
  }
  return (isJPG || isPNG) && isLt2M;
}

/** 图片超限后提醒 */
function handleAlarm() {
  proxy.$modal.msgError("上传图片数目不能超过三张图片!");
}

/** 处理现场材料上传 */
function handleAcceptUpload(userFile) {
  const formData = new FormData();
  formData.append("file", userFile.file);
  uploadFile(formData).then((response) => {
    //form.value.dangerImg = response.data.urls;
    console.log("上传图片的返回结果", response.data.urls);
    acceptImgList.value.push(response.data.urls);
    acceptForm.value.checkAcceptDesc = acceptImgList.value + "";
  });
}

/** 删除验收材料 */
function handleAcceptRemove(file, index) {
  acceptImgList.value.splice(index, 1);
  acceptForm.value.checkAcceptDesc = acceptImgList.value + "";
}

/** 处理整改材料上传 */
function handleRectifyUpload(userFile) {
  const formData = new FormData();
  formData.append("file", userFile.file);
  uploadFile(formData).then((response) => {
    console.log("上传图片的返回结果", response.data.urls);
    rectifyImgList.value.push(response.data.urls);
    rectifyForm.value.liableDesc = rectifyImgList.value + "";
  });
}

/** 删除整改材料 */
function handleRectifyRemove(file, index) {
  rectifyImgList.value.splice(index, 1);
  rectifyForm.value.liableDesc = rectifyImgList.value + "";
}

/** 处理整改通知单上传前 */
function beforeNoticeUpload(file) {
  const isPDF = file.type === "application/pdf";
  const isLimit = file.size / 1024 / 1024 < 35;
  if (!isPDF) {
    proxy.$modal.msgError("上传文件只能是PDF格式!");
  }

  if (!isLimit) {
    proxy.$modal.msgError("上传文件大小不能超过 35MB!");
  }
  return isLimit && isPDF;
}

/** 整改通知单超限后提醒 */
function handleNoticeAlarm() {
  proxy.$modal.msgError("上传文件数目只能一个!");
}

/** 处理整改通知单上传 */
function handleNoticeUpload(userFile) {
  const formData = new FormData();
  formData.append("file", userFile.file);
  uploadFile(formData).then((response) => {
    allocationForm.value.noticeRectification = response.data.urls;
  });
}
/** 预览PDF文件 */
function handlePdfPreview() {
  openPDF.value = true;
  title.value = "PDF预览";
}

/** 取消PDF预览 */
function cancelPdfPreview() {
  openPDF.value = false;
}
getDangerTypeList();
getHiddenLevelList();
getHiddenCheckListTypeList();
getDangerStateList();
</script>
<style scoped lang="scss">
.info-title {
  height: 48px;
  width: 100%;
  padding: 0 18px;
  border-radius: 5px;
  background-color: #f6f8fa;
  color: #2c2c2c;
  margin: -6px 0 15px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  & .info-back {
    color: #0086ff;
  }
  & span {
    font-weight: 800;
  }
}
.info-header {
  width: 100%;
  height: 116px;
  background: url(./../../../assets/prevent/total_bg.png) no-repeat;
  background-size: 100% 100%;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding-left: 20px;
  & span:nth-child(1) {
    width: 70%;
    height: 33px;
    font-size: 24px;
    line-height: 33px;
    font-weight: 600;
    color: #fff;
    line-height: 33px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;

    word-wrap: normal;
  }
  & img {
    width: 98px;
    height: 98px;
  }
}
.info-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 42px;
  padding: 18px;
  margin-bottom: 8px;
  font-size: 12px;
  background-color: #f6f8fa;
  border-radius: 5px;
  &:hover {
    padding: 5px;
    font-size: 16px;
  }
  & span:nth-child(1) {
    width: 180px;
    font-weight: 800;
    color: #9e9e9e;
  }
  & span:nth-child(2) {
    margin-left: 20px;
    font-size: 14px;
  }
}

.info-pdf {
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
  & span {
    width: 50%;
    word-wrap: normal;
    overflow: hidden;
  }
  & img {
    height: 28px;
    width: 28px;
  }
}
</style>
